<script setup lang="ts"></script>

<template>
  <div class="subnavcontainer _subnavcontainer">
    <div><i class="iconfont icon-MacBookAir"></i><span>MacBook Air</span></div>
    <div><i class="iconfont icon-MacBookPro"></i><span>MacBook Pro</span></div>
    <div><i class="iconfont icon-Mac"></i><span>Mac</span></div>
  </div>
</template>

<style scoped lang="less">
// 大于800px
@media only screen and (min-width: 800px) {
  .subnavcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
    width: 100%;
    background-color: rgb(249, 249, 250);

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 0 20px;

      i {
        font-size: 50px;
        cursor: pointer;
      }

      span {
        font-size: 10px;
        cursor: pointer;

      }

      span:hover {
        color: rgb(12, 106, 205);
        font-weight: 500;
      }
    }
  }
}

// 小于800px
@media only screen and (max-width: 799px) {
  ._subnavcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
    width: 100%;
    background-color: rgb(249, 249, 250);
    overflow-x: auto;

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 0 20px;

      i {
        font-size: 50px;
        cursor: pointer;
      }

      span {
        font-size: 10px;
        cursor: pointer;

      }

      span:hover {
        color: rgb(12, 106, 205);
        font-weight: 500;
      }
    }
  }
}
</style>
